<template>
  <div class="box">
    <a-modal title="选择条件" :visible="visible" :destroy-on-close="true" @ok="handleOk" @cancel="handleCancel">
      <div class="mg_b24">请选择用来区分审批流程的条件字段</div>
      <a-row type="flex" :gutter="[24, 24]">
        <a-col v-for="(item, i) in options" :key="i">
          <a-checkbox :default-checked="item.checked" @change="onChange($event, item, i)">
            {{ item.label }}
          </a-checkbox>
        </a-col>
      </a-row>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: "AddCondition",
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    options: {
      type: Array,
      default: () => []
    }
  },
  data: function() {
    return {
      checkedList: []
    };
  },
  methods: {
    handleOk() {
      this.$emit("change", {
        visible: false,
        options: this.options
      });
    },
    handleCancel() {
      this.$emit("change", {
        visible: false
      });
    },
    onChange($event, e, i) {
      e.checked = $event.target.checked;
    }
  }
};
</script>
